<template>
  <div style="height: 100%" v-loading="loading">
    <DynamicComponent v-if="componentType === 'component'" ref="DynamicComponent"/>
    <DefaultFormDetailComponent v-if="componentType === 'default'" ref="DefaultFormDetailComponent"/>
  </div>
</template>

<script>
import DynamicComponent from '@/components/DefaultDynamicComponent';
import DefaultFormDetailComponent from '@/components/platwork/FormDetailComponent/DefaultFormDetailComponent';
import {isEmpty} from '@/utils/CommonUtils';
import {DefaultMenuDefinition} from '@/components/form/DefaultFormDefinition';
import {getAction} from '@/request/BaseRequest';

export default {
  name: 'FormDetailView',
  components: {
    DynamicComponent,
    DefaultFormDetailComponent
  },
  mounted() {
    this.resolveComponentType();
  },
  data() {
    return {
      loading: false,
      menuDefinition: JSON.parse(JSON.stringify(DefaultMenuDefinition)),
      componentType: 'default'
    };
  },
  methods: {
    resolveComponentType() {
      this.componentType = 'default';
      if (isEmpty(this.$route.query.viewId)) {
        this.loadMenuDefinition();
      }
    },
    setMenuDefinition(menuDefinition) {
      this.menuDefinition = menuDefinition;
      this.componentType = 'component';
      this.$nextTick(() => {
        console.log(this.menuDefinition.detailPageComponent)
        this.$refs.DynamicComponent.setComponent(this.menuDefinition.detailPageComponent, () => {

        });
      });
    },
    loadMenuDefinition() {
      this.loading = true;
      getAction('/plat/platFormMenuPublish/queryById', {id: this.$route.query.menuId}).then(data => {
        if (data.success) {
          this.setMenuDefinition(data.result);
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      })
    },
  }
};
</script>
